<link href="<?php echo DOMAIN.'/access/'; ?>nestable/nestable.css" rel="stylesheet" type="text/css" />
<script src="<?php echo DOMAIN.'/access/'; ?>nestable/jquery.nestable.js"></script>
<script type="text/javascript">
$(function() {
  $('.dd').nestable({ 
    dropCallback: function(details) {
       
       var order = new Array();
       $("li[data-id='"+details.destId +"']").find('ol:first').children().each(function(index,elem) {
         order[index] = $(elem).attr('data-id');
       });

       if (order.length === 0){
        var rootOrder = new Array();
        $("#nestable > ol > li").each(function(index,elem) {
          rootOrder[index] = $(elem).attr('data-id');
        });
       }

       $.post('<?php echo DOMAIN.'/'; ?>application.php?mod=mod_admin&control=Menus&task=reorder', 
        { source : details.sourceId, 
          destination: details.destId, 
          order:JSON.stringify(order),
          rootOrder:JSON.stringify(rootOrder) 
        }, 
        function(data) {
         // console.log('data '+data); 
        })
       .done(function() { 
          $( "#success-indicator" ).fadeIn(100).delay(1000).fadeOut();
       })
       .fail(function() {  })
       .always(function() {  });
     }
   });

  $('.delete_toggle').each(function(index,elem) {
      $(elem).click(function(e){
        e.preventDefault();
        $('#postvalue').attr('value',$(elem).attr('rel'));
        $('#deleteModal').modal('toggle');
      });
  });
});
</script>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Quản lý Menu
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i>Admins</a></li>
        <li><a href="#">Sản phẩm</a></li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <!-- column -->
            <div class="col-md-12">
              <div class="box">
                <div class="box-header">
                  <h3 class="box-title">List Menu</h3>
                  <div class="more-action">
                        <a href="#newModal" class="btn btn-block btn-primary" data-toggle="modal" >Thêm menu</a>
                  </div>                                           
                </div><!-- /.box-header -->
                <div class="box-body">
                    <div class="dd" id="nestable">
                        <?php echo $menu; ?>
                    </div>
                    <p id="success-indicator" style="display:none; margin-right: 10px;">
                      <span class="glyphicon glyphicon-ok"></span> Menu order has been saved
                    </p>
                    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
                    <div class="bmore-action">
                        <a href="#newModal" class="btn btn-block btn-primary" data-toggle="modal" >Thêm menu</a>
                    </div>                                                       
                </div><!-- /.box-body -->
              </div><!-- /.box -->
        </div>
        
  <!-- Create new item Modal -->
   <div class="modal fade" id="newModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
       <form id="addMenu" action="<?php echo DOMAIN.'/'; ?>application.php?mod=mod_admin&control=Menus&task=add" method="POST" class="class" role="form">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Provide details of the new menu item</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">
                <label for="title" class="col-lg-2 control-label">Tên menu <font color="red">(*)</font></label>
                <input type="text" class="form-control" style="width:80%;" placeholder="Tên hiển thị menu" name="NAME_MENU" required />
            </div>
            <div class="form-group">
                <label for="label" class="col-lg-2 control-label">Tên trên title <font color="red">(*)</font></label>
                <input type="text" class="form-control" style="width:80%;" placeholder="Tên menu hiển thị trên title" name="SEO_MENU" required />
            </div>
            <div class="form-group">
                <label for="label" class="col-lg-2 control-label">Url menu <font color="red">(*)</font></label>
                <input type="text" class="form-control" style="width:80%;" placeholder="Url lấy ở quản lý danh mục" name="URL_MENU" required />
            </div>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Hủy</button>
           <button type="submit" class="btn btn-primary">Tạo</button>
         </div>
         </form>
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal --> 
   
  <!-- Delete item Modal -->
   <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
          <form action="<?php echo DOMAIN.'/'; ?>application.php?mod=mod_admin&control=Menus&task=del" method="POST" role="form">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Provide details of the new menu item</h4>
          </div>
          <div class="modal-body">
            <p>Are you sure you want to delete this menu item?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <input type="hidden" name="delete_id" id="postvalue" value="" />
            <input type="submit" class="btn btn-danger" value="Delete Item" />
          </div>
          </form>
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->          
    </section><!-- /.content -->      
</div><!-- /.content-wrapper -->
<script>
    $("#addMenu").validate({
      submitHandler: function(form) {
        // do other things for a valid form
        form.submit();
      }
    });
</script>